import React, { Component } from 'react'
import { NavLink } from "react-router-dom";
import './index.css'

interface NavItem {
    id: number,
    name: string,
    path: string,
    icon: string
}

export default class SideBar extends Component {
    NavList: Array<NavItem> = [
        {
            id: 1,
            name: '采集页面',
            path: 'collect',
            icon: 'CameraOutlined'
        },
        {
            id: 2,
            name: '通信监控页面',
            path: 'monitor',
            icon: 'ClusterOutlined'
        }
    ]
    render() {
        return (
            <div className='nav_box'>
                {
                    this.NavList.map(item => {
                        return (
                            <NavLink to={item.path} className="menu-link"  key={item.id} style={{ width: "100%", height: "100%" }}>
                                <span className="menu-title">{item.name}</span>
                            </NavLink>
                        )
                    })
                }
            </div>
        )
    }
}
